<!-- 拒保弹框 -->
<template>
    <div>
        <el-dialog v-model="showDialog" title="修改信息" width="500">
            <div class="flex items-center mb-12px">
                <div class="flex-basis-100px text-end"><span class=" text-red-6">*</span>备注：</div>
                <el-input v-model="remark" placeholder="请输入" />
            </div>
            <div class="flex items-center mb-12px">
                <div class="flex-basis-100px text-end"><span class=" text-red-6">*</span>渠道信息：</div>
                <el-select placeholder="请选择" v-model="channel" @change="onChangeChannel">
                    <el-option v-for="item in channelList" :key="item.name" :label="item.name" :value="item.id" />
                </el-select>
            </div>
            <div class="flex items-center mb-12px">
                <div class="flex-basis-100px text-end"><span class=" text-red-6">*</span>收款账户：</div>
                <el-select filterable placeholder="请选择" v-model="account">
                    <el-option v-for="item in accountList" :key="item.id" :label="item.bankName" :value="item.id" />
                </el-select>
            </div>
            <div class="flex items-center mb-12px">
                <div class="flex-basis-100px text-end"><span class=" text-red-6">*</span>充值方式：</div>
                <el-select filterable placeholder="请选择" v-model="payMode">
                    <el-option v-for="item in payModeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="flex items-center justify-center mt-20px">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { getAccountListByChannelId } from '@/api/tools/accountLimit'
import { getChannelList, editRechargeAccountInfoApi } from '@/api/tools/manageAccount'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    query: {
        type: Object,
        default() {
            return {}
        }
    }
})
const account = ref('')
const payMode = ref('')
const remark = ref('')
const channel = ref('')
const emits = defineEmits(['update:show', 'updateList'])

const showDialog = ref(false)
const onChangeChannel = async () => {
    await getAccountList(channel.value)
    account.value = ''
}
const onCancel = () => {
    emits('updateList')
    showDialog.value = false
}
const channelList = ref([] as any)
const accountList = ref([] as any)
const payModeList = ref([
    {
        label: '公对公',
        value: 1,
    },
    {
        label: '微信',
        value: 2,
    },
    {
        label: '私对公',
        value: 3,
    },
    {
        label: '赠送',
        value: 4,
    }
] as any)
const onConfirm = async () => {
    if (remark.value == '') {
        ElMessage.warning('请输入备注')
        return
    }
    if (channel.value == '') {
        ElMessage.warning('请选择渠道')
        return
    }
    if (account.value == '') {
        ElMessage.warning('请选择收款账户')
        return
    }
    if (payMode.value == '') {
        ElMessage.warning('请选择充值方式')
        return
    }
    await editRechargeAccountInfoApi({
        remark: remark.value,
        receiptId: account.value,
        productType: props.query.productType,
        payMode: payMode.value,
        id: props.query.id
    })
    await ElMessage.success('修改成功')
    await onCancel()
}
const getChannelListFn = async () => {
    const res: any = await getChannelList({ type: 1 })
    channelList.value = res?.list || []
}
const getAccountList = async (id: number | string) => {
    const res: any = await getAccountListByChannelId({
        channelId: id,
        pageSize: 9999,
    })
    accountList.value = res.list || []
}
watch(() => props.show, async (newval) => {
    showDialog.value = newval
    if (newval) {
        await getChannelListFn()
        await getAccountList(props.query.channelId)
        console.log(props.query.channelName, 'query')
        remark.value = props.query.remark ?? ''
        channel.value = props.query.channelName
        account.value = props.query.receiptId
        payMode.value = props.query.payMode
    }
})

watch(showDialog, (newval) => {
    emits('update:show', newval)
})
</script>
<style lang="scss" scoped></style>
